<template>
  <div class="box">
    <div class="title"><p>男女比例</p></div>
    <div class="sex">
      <div class="man">
        <svg-icon-component name="man" width="150px" height="150px"></svg-icon-component>
      </div>
      <div class="woman">
        <svg-icon-component name="woman" width="150px" height="150px"></svg-icon-component>
      </div>
    </div>
    <div class="rate">
      <p>男士58%</p>
      <p>女生42%</p>
    </div>
    <div class="charts" ref="EchartsVc"></div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
//@ts-ignore
import SvgIconComponent from "@/components/SvgIcon/svgIconComponent.vue";
import * as echarts from 'echarts';


//获取图形图表的DOM节点
let EchartsVc = ref<any>()

onMounted(() => {
  let mycharts = echarts.init(EchartsVc.value)
  //设置echarts配置项
  mycharts.setOption({
    //标题组件
    title: {text: '男女比例', left: 'center'},
    //x|y
    xAxis: {show: false, min: 0, max: 100},
    yAxis: {show: false, type: 'category'},

    //系列
    series: [{
      //男士
      type: 'bar',
      data: [58],
      barWidth: 20,
      z: 100,
      itemStyle: {
        color: 'skyblue',
        borderRadius: 20
      }
    }, {
      //女士
      type: 'bar',
      data: [100],
      barWidth: 20,
      barGap: '-100%',
      itemStyle: {
        color: 'pink',
        borderRadius: 20
      }
    }
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    }

  });


})

</script>

<style scoped lang="scss">
.box {
  margin: 20px 0;
  background: rgba(168, 178, 177, 0.35);
  width: 100%;
  height: 100%;

  .title {
    margin-top: 20px;
    margin-left: 20px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .sex {
    display: flex;
    justify-content: center;

    .man {
      margin-top: 20px;
      margin-right: 45px;
      justify-content: center;
    }

    .woman {
      margin-top: 20px;
      margin-left: 45px;
      justify-content: center;
    }
  }

  .rate {
    display: flex;
    justify-content: space-between;
    p{
      color: white;
    }
  }

  .charts {
    height: 100px;
  }
}
</style>